<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>资讯详情</title>
		<script src="js/jquery-3.3.1.min.js"></script>
		<link rel="stylesheet" type="text/css" href="./css/newsDetails.css" />
		<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件 -->
		<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
		<!-- uni 的 SDK -->
		<script type="text/javascript" src="http://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.2.2.js"></script>
	</head>
	<body>
		<div id='infomationDetails' class='infomationDetails'>
			<div class='details'>
				<h3>{{title}}</h3>
				<p>
					<span>{{time}}</span>
					<span>{{from}}</span>
				</p>
				<div>
					<div class='content' v-html='content'>

					</div>
				</div>
			</div>

		</div>
		<script src="./js/vue.js"></script>
		<script src="./js/elementui.js"></script>

		<script type="text/javascript">
			let loaded = false;
			document.addEventListener("plusready", function() {
				if (loaded) plus.nativeUI.closeWaiting()
			})

			new Vue({
				el: '#infomationDetails',
				data() {
					return {
						params: {
							targetId: ''
						},
						bigImg: '',
						title: '',
						content: '',
						from: '',
						time: ''
					}
				},
				methods: {
					getQueryString(name) {
						var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
						var r = window.location.search.substr(1).match(reg);
						if (r != null) {
							return unescape(r[2]);
						}
						return '';
					},
					formatTime(time, option) {
						time = +time * 1000
						const d = new Date(time)
						const now = Date.now()

						const diff = (now - d) / 1000

						if (diff < 30) {
							return '刚刚'
						} else if (diff < 3600) {
							// less 1 hour
							return Math.ceil(diff / 60) + '分钟前'
						} else if (diff < 3600 * 24) {
							return Math.ceil(diff / 3600) + '小时前'
						} else if (diff < 3600 * 24 * 2) {
							return '1天前'
						}
						if (option) {
							return parseTime(time, option)
						} else {
							return (
								d.getMonth() +
								1 +
								'月' +
								d.getDate() +
								'日' +
								d.getHours() +
								'时' +
								d.getMinutes() +
								'分'
							)
						}
					},
					getNewDetails() {
						let _this = this;
						this.params.targetId = this.getQueryString("id");
						$.ajax({
							url: "http://grys.nervenets.com/api/v1/newsDetail",
							method: 'post',
							data: this.params,
							success: function(json) {
								if (json.status) {
									console.log(json);
									if (json.data.info.bigCoverImage) {
										_this.bigImg = json.data.info.bigCoverImage;
									}

									_this.title = json.data.info.title;
									_this.time = _this.formatTime(json.data.createTime);
									_this.from = json.data.info.source;
									_this.content = json.data.info.content;
								}
								loaded = true;
								if (plus) {
									plus.nativeUI.closeWaiting()
								}
								setTimeout(function() {
									let urls = [];
									$(".content img").each(function(index) {
										$(this).attr("index", index)
										urls.push($(this).attr("src"))
									})
									console.log(urls)
									$(".content img").click(function(index) {
										console.log($(this).attr("index"))
										if (typeof plus !== "undefined") {
											plus.nativeUI.previewImage(urls, {
												current: $(this).attr("index"),
												indicator: "number"
											})
										}
										console.log($(this).attr("src"))
									})
								}, 200)
							}
						});
					}

				},
				mounted() {
					this.getNewDetails();
					document.title = '视纪影视';
				}
			});
		</script>
	</body>
</html>
